<script setup>
import { defineProps } from 'vue'
const props = defineProps(['data'])
import config from '@/config'
const baseUrl = config.baseUrl
</script>

<template>
  <view class="container">
    <uni-card :border="false" :is-shadow="false" margin="0" padding="0" spacing="0">
      <view style="display: flex; align-items: center">
        <text class="titleText">{{ props.data.type }}</text>
        <span :class="props.data.applyStatus">{{ props.data.applyStatus }}</span>
      </view>
      <view class="nameContainer">
        <image
          :src="baseUrl+props.data.avatar"
          style="width: 36rpx; height: 36rpx; margin-right: 8rpx;border-radius: 50%;"
        ></image>
        <text class="nameText">{{props.data.nickName}}</text>
        <text class="departmentText">{{props.data.deptName}}</text>
      </view>
      <view class="infoContainer">
        <text class="infoText">提交于 {{props.data.createTime}}</text>
      </view>
    </uni-card>
  </view>
</template>

<style lang="scss" scoped>
@import '@/static/style/index.scss';

.container {
  width: 686rpx;
  height: 232rpx;
  background-color: #ffffff;
  margin: 0 32rpx;
  padding: 32rpx;
  border-radius: 16rpx;
}

.titleText {
  color: #1d2129;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 40rpx;
  font-style: normal;
  font-weight: 500;
  line-height: 56rpx;
  margin-right: 16rpx;
}

.nameContainer {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
}

.nameText {
  color: #4e5969;
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6rpx;
}

.departmentText {
  margin-left: 8rpx;
  color: #86909c;
  text-align: center;
  font-family: 'PingFang SC';
  font-size: 24rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 33.6rpx;
}

.infoContainer {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
}

.infoText {
  align-self: stretch;
  color: #86909c;
  font-family: 'PingFang SC';
  font-size: 28rpx;
  font-style: normal;
  font-weight: 400;
  line-height: 39.2rpx;
}
</style>
